<template>
  <!-- vx兑换-->
  <div class="exchange">
    <!-- 兑换目标 -->
    <!-- <div class="exchange_top">
      <p>兑换给谁</p>
      <p>
        {{ username }}
        <span @click="tuichuClick">[退出]</span>
      </p>
      <div>
        <img :src="morenPic" alt />
        <div>
          <span>{{ tomoney }}</span>
          <span @click="changeTanClick">修改</span>
        </div>
      </div>
    </div> -->
    <!-- 兑换 -->
    <div class="exchange_bottom">
      <p>兑换数量 <span @click="tuichuClick">[切换登录]</span></p>
      <input type="text" :placeholder="ke" v-model="num" />
      <div @click="exchangeClick">确认兑换</div>
    </div>
    <!-- 更换兑换用户 -->
    <!-- <div
      class="exchange_change"
      v-show="tanShow"
      @click.stop="exchangechangeClick"
    >
      <div>
        <input
          type="text"
          v-model="toNumber"
          placeholder="请输入用户ID"
          @click.stop="changeIDClick"
        />
        <div @click="changeExchangeClick">确认</div>
      </div>
    </div> -->
    <!-- 输入支付密码 -->
    <!-- <div class="exchange_pay" v-if="showKeyboard">
      <div>
        <p>请输入支付密码</p>
        <van-password-input
          :value="paypassword"
          :gutter="5"
          :focused="showKeyboard"
        />
        <div @click.stop="paypasswordBlurClick" class="exchange_pay_ok">
          确认
        </div>
        <van-number-keyboard
          v-model="paypassword"
          :show="true"
          @blur="paypasswordBlurClick"
        />
      </div>
    </div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
import "../../assets/jquery-3.4.1.js";
import "../../assets/jquery-3.4.1.min.js";
import md5 from "js-md5";
import qs from "qs";
import moren from "../../public/img/other/morentouxiang.png";
export default {
  data() {
    return {
      token: "",
      userId: "",
      openId: "",
      money: "",
      username: "",
      ke: "可兑换0积分",
      num: "",
      goalInfo: null,
      morenPic: moren,
      zhuanShow: true,
      tomoney: null,
      toNumber: null,
      tanShow: false,
      tototoId: null,
      paypassword: "",
      showKeyboard: false,
      true: true,
    };
  },
  created() {
    // let openId = this.getCookie("openId");
    // console.log(openId);
    // if (!!openId || openId == "undefined") {
    //   //有openId
    //   this.openId = openId;



    this.$store.commit("empty");
    let token = this.getCookie("token");
    if (!token) {
      this.$store.commit("change", "/exchange");
      this.$router.push("/login");
    }
    let userId = this.getCookie("userId");
    this.userId = userId;
    this.tototoId = userId;
    this.token = token;
    this.getZuan();



    // } else {
    //   //没有openId
    //   let url = location.href;
    //   let codetest = RegExp(/code/);
    //   console.log(url, codetest.test(url));
    //   if (codetest.test(url)) {
    //     //地址中有code值
    //     let codeStr = url.split("?")[1].split("&")[0].split("=")[1];
    //     this.getOpenID(codeStr);
    //   } else {
    //     //地址中没有code值
    //     this.getCode();
    //   }
    // }
  },
  methods: {
    // 输入支付密码
    paypasswordBlurClick() {
      this.showKeyboard = false;
      console.log(this.paypassword);
      if (this.paypassword.length == 6) {
        this.okexchangeClick();
      }
    },
    // paypasswordFocusClick(){
    //   this.showKeyboard=true
    // },
    // 获取本人信息
    getZuan() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        this.userId +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: this.userId,
        time: timestamp,
        token: this.token,
        sign: md5(_token),
      };
      this.$axios
        .post("/user/userInfo", qs.stringify(params))
        .then((res) => {
          // console.log(res.data.result);
          this.num = "";
          if (res.data.status == 0) {
            this.goalInfo = res.data.result.user;
            this.username = res.data.result.user.nickname;
            this.money = res.data.result.user.wagesMoney;
            this.ke = "可兑换" + res.data.result.user.wagesMoney + "积分";
            if (this.zhuanShow) {
              this.morenPic = res.data.result.user.headPic;
              this.tomoney = res.data.result.user.nickname;
            }
          } else {
            // location.reload();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 设置cookie
    setCookie(cname, cvalue, exdays) {
      let date = new Date();
      date.setTime(date.getTime() + exdays * 24 * 60 * 60 * 1000);
      let expires = "expires=" + date.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    // 获取cookie
    getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
    // 获取code
    getCode() {
      let codeUrl = "";
      let url = encodeURIComponent("http://h5.paipaixingqiu.com/h5/#/exchange");
      codeUrl =
        "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd35b45f47cc708a7&redirect_uri=" +
        url +
        "&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
      location.href = codeUrl;
    },
    //  tuichuClick() {
    //   document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
    //   document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
    //   // document.cookie = "openId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
    //   this.userId = "";
    //   this.token = "";
    //   // this.username = "";
    //   this.$store.commit("change", "/recharge");
    //   this.$router.push("/login");
    // },
    // 获取openid
    getOpenID(code) {
      this.$axios
        .post("/index/getOpenId", qs.stringify({ code: code }))
        .then((res) => {
          console.log(res);
          this.openId = res.data.result.openid;
          this.setCookie("openId", res.data.result.openid, 180);
          let token = this.getCookie("token");
          if (token) {
            let userId = this.getCookie("userId");
            this.userId = userId;
            this.token = token;
            this.getZuan();
          } else {
            this.$store.commit("change", "/exchange");
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 更换兑换目标
    exchangechangeClick() {
      this.tanShow = false;
    },
    changeIDClick() {},
    //退出登录
    tuichuClick() {
      document.cookie = "userId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      document.cookie = "openId=; expires=Thu, 01 Jan 1970 00:00:01 GMT;";
      this.userId = "";
      this.token = "";
      this.username = "";
      this.$store.commit("change", "/exchange");
      this.$router.push("/login");
    },
    //兑换
    okexchangeClick() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        this.userId +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&payPassword=" +
        this.paypassword +
        "&num=" +
        this.num +
        "&memberId=" +
        this.tototoId +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: this.userId,
        memberId: this.tototoId,
        time: timestamp,
        payPassword: this.paypassword,
        num: this.num,
        token: this.token,
        sign: md5(_token),
      };
      this.$axios
        .post("/user/balanceDiamond", qs.stringify(params))
        .then((res) => {
          console.log(res.data);
          Toast(res.data.text);
          setTimeout(() => {
            this.getZuan();
          }, 500);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //确认兑换判定
    exchangeClick() {
      if (this.num) {
        this.okexchangeClick();
      } else {
        Toast(" 请输入兑换金额");
      }
    },
    //变更更改兑换目标弹窗显示状态
    changeTanClick() {
      this.tanShow = true;
    },
    // 更换兑换人
    changeExchangeClick() {
      let timestamp = (Date.parse(new Date()) / 1000).toString();
      let _token =
        "userId=" +
        this.userId +
        "&token=" +
        this.token +
        "&time=" +
        timestamp +
        "&perfectNumber=" +
        this.toNumber +
        "&wPQvCAOU$lbIyg9o2wVg0Dt1k^zy&SaX";
      let params = {
        userId: this.userId,
        perfectNumber: this.toNumber,
        time: timestamp,
        token: this.token,
        sign: md5(_token),
      };
      if (this.toNumber) {
        this.$axios
          .post("/user/getUserbyNumber", qs.stringify(params))
          .then((res) => {
            console.log(res.data);
            if (res.data.status == 0) {
              this.morenPic = res.data.result.head_pic;
              this.tomoney = res.data.result.nick_name;
              this.tototoId = res.data.result.user_id;
              this.zhuanShow = false;
              this.tanShow = false;
            } else {
              Toast(res.data.text);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
};
</script>
<style>
.exchange {
  width: 100vw;
  overflow: hidden;
  background: rgba(249, 249, 249, 1);
  height: 100vh;
  position: relative;
}
.exchange_top {
  width: 100vw;
  height: 23vw;
}
.exchange_top > p {
  width: 88vw;
  margin-left: 6vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-size: 3.6vw;
  margin-top: 5vw;
}
.exchange_top > p:nth-of-type(2) {
  position: absolute;
  text-align: right;
  width: 100vw;
  top: 0;
  font-size: 3vw;
  margin-left: 0;
}
.exchange_top > p:nth-of-type(2) > span {
  margin: 0 5vw;
}
.exchange_top > div {
  width: 88vw;
  margin-left: 6vw;
  margin-top: 4.8vw;
}
.exchange_top > div > img {
  float: left;
  width: 12.1vw;
  height: 12.1vw;
  border-radius: 50%;
  border: 1px solid #f41334;
}
.exchange_top > div > div {
  float: left;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  font-size: 3.6vw;
  margin-left: 2.4vw;
  line-height: 12.1vw;
  width: 73vw;
  display: flex;
  justify-content: space-between;
}
.exchange_top > div > div > span:nth-child(2) {
  color: #f41334;
}
.exchange_bottom > p {
  width: 88vw;
  margin-left: 6vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-size: 3.6vw;
  margin-top: 5vw;
}
.exchange_bottom > p >span {
 float:right;
}
.exchange_bottom > input {
  width: 80vw;
  margin-left: 6vw;
  height: 8.7vw;
  padding: 0 4vw;
  line-height: 8.7vw;
  margin-top: 5vw;
  background: rgba(235, 235, 235, 1);
  border: none;
  border-radius: 4.35vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  font-size: 3.4vw;
}
.exchange_bottom > div {
  width: 83.5vw;
  margin-left: 8.25vw;
  height: 13.3vw;
  line-height: 13.3vw;
  background: linear-gradient(90deg, #fea16a 0%, #fe6206 100%);
  border-radius: 6.55vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  font-size: 5vw;
  text-align: center;
  margin-top: 28.5vw;
}
.exchange_change {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.62);
}
.exchange_change > div {
  width: 72.7vw;
  position: absolute;
  left: 13.65vw;
  height: 43.5vw;
  top: 50%;
  margin-top: -21.75vw;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.07);
  border-radius: 2.4vw;
}
.exchange_change > div > input {
  margin-left: 10vw;
  width: 48.4vw;
  margin-left: 8.55vw;
  margin-top: 10.4vw;
  height: 7.7vw;
  background: rgba(249, 249, 249, 1);
  border: none;
  border-radius: 3.85vw;
  padding: 0 3.6vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 3.4vw;
}
.exchange_change > div > div {
  width: 55.6vw;
  margin-left: 8.55vw;

  background: linear-gradient(135deg, #f32a7a 0%, #f31029 100%);
  border-radius: 6vw;
  height: 8.2vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  font-size: 3.4vw;
  text-align: center;
  line-height: 8.2vw;
  margin-top: 6.8vw;
}
.exchange_pay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.62);
}
.exchange_pay > div {
  background: #f2f3f5;
  position: absolute;
  bottom: 0;
  height: 120vw;
  width: 100vw;
  border-radius: 2.6vw 2.6vw 0 0;
}
.exchange_pay > div > p {
  margin: 5.6vw 0 8.2vw 0;
  width: 100vw;
  font-size: 4.6vw;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
.exchange_pay_ok {
  width: 77vw;
  margin-left: 11.5vw;
  height: 11.3vw;
  line-height: 11.3vw;
  border-radius: 6vw;
  background: linear-gradient(139deg, #e256d3 0%, #ff4263 100%);
  font-size: 4.1vw;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  margin-top: 8vw;
}
</style>